<style scoped>
  .vendorOrderQuery{
    margin-right: 0.5vw;
    padding: 0 15px;
    background-color: white;
    height: 95vh;
    position: relative;
  }
  .cog-top{
    padding: 1.5vh 0;
    border-bottom: 2px solid #f4f4f4;
  }
  .cog-top div{
    white-space:nowrap;
  }
  p{
    margin-right: 10px;
    display: inline-block;
    text-align: right;
  }
  .top-inp{
    width: 8vw;
    margin-right: 10px;
  }
  .cog-btn{
    display: flex;
    justify-content: space-between;
    padding: 1.5vh 0;
  }
  .footView span{
    float: left;
    margin-right: 48px;
    line-height: 6vh;
    font-size: 14px;
  }
  .footView span i{
    margin-right: 5px;
  }
  .cog-tab{
    display: flex;
  }
  .cog-tab>div:first-child{
    padding-right: 20px;
    width: 30%;
    border-right: 2px solid #f4f4f4;
  }
  .cog-tab>div:last-child{
    padding-left: 20px;
    width: 70%;
  }
  .expt{
    width: 260px;
    height: 170px;
    position: absolute;
    top: 20%;
    box-shadow: 0 3px 3px 3px #f4f4f4;
    left: 16%;
    z-index: 2;
    background: white;
    font-weight: 700;
    padding: 15px;
  }
  .expt>div{
    margin-top: 10px;
    text-align: end;
  }
  .riqi{
    margin-top:1.5vh;
  }
</style>

<style>
  .vendorOrderQuery .el-input, .vendorOrderQuery .el-input__inner{
    height: 30px;
  }
  .vendorOrderQuery .cog-btn .el-checkbox.is-bordered{
    padding: 5px 10px 0 10px;
    height: 30px;
    margin: 0 0 0 10px;
  }
  .vendorOrderQuery .cog-top .el-date-editor .el-range__icon{
    line-height: 23px;
  }
  .vendorOrderQuery .cog-top .el-date-editor .el-range-separator{
    line-height: 23px;
    width: 8%;
  }
  .vendorOrderQuery .cog-top .riqi .el-date-editor.el-input__inner{
    width: 20.3vw;
  }
  .vendorOrderQuery .el-input__icon{
    line-height: 30px;
  }

  .vendorOrderQuery .el-pagination .el-select .el-input .el-input__inner , .vendorOrderQuery .el-pagination .el-select .el-input{
    width: 90px;
  }
  .vendorOrderQuery .el-pagination{
    float: right;
    margin-top: 5px;
  }
  .vendorOrderQuery .el-input--mini .el-input__inner{
    height: 23px;
  }

  .vendorOrderQuery .el-table__footer td {
  height: 26px;
}

.vendorOrderQuery .el-table .cell {
    padding:0 0 0 5px;
  }

  .vendorOrderQuery .el-pagination--small .el-pagination__editor.el-input .el-input__inner {
    width: 40px;
  }
</style>

<template>
  <div class="vendorOrderQuery">
    <!-- 厂商订货查询 -->
    <div class="cog-top">
      <div>
        <p>厂商</p>
        <el-select class="top-inp" v-model="manufacturer" clearable multiple collapse-tags>
          <el-option v-for="item in manufacturerList" :key="item.value" :label="item.label" :value="item.value">
            <span style="float:left">{{item.value}}</span>
            <span style="float:right">{{item.label}}</span></el-option>
        </el-select>
        <p>预交日期</p>
        <el-date-picker class="top-inp" v-model="inputDate1" type="date" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
        <p>厂订序号</p>
        <el-input class="top-inp" v-model="inputSequence"></el-input>
        <p>单号</p>
        <el-input class="top-inp" v-model="receiptsNumber"></el-input>
        <p>款号</p>
        <el-input class="top-inp" v-model="styleNumber"></el-input>
        <p>品牌</p>
        <el-select class="top-inp" v-model="brandedName">
          <el-option v-for="item in brandList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <p>品名</p>
        <el-select class="top-inp" v-model="commodityName">
          <el-option v-for="item in commodityNameList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </div>
      <div class="riqi">
        <p>日期</p>
        <el-date-picker unlink-panels v-model="dateList" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"></el-date-picker>
      </div>
    </div>
    <div class="cog-btn">
      <div>
        <el-button @click="search" icon="el-icon-search" type="primary">查询</el-button>
        <el-button @click="Confirm" icon="el-icon-circle-check" :disabled="isConfirm">确认</el-button>
        <el-button @click="showpwdbox" icon="el-icon-edit-outline" :disabled="jxChangeOrder">改单</el-button>
        <el-button @click="showsupbox" icon="el-icon-folder-add" :disabled="jxChangeOrder">补单</el-button>
        <el-button @click="printReport" icon="el-icon-printer">列印</el-button>
        <el-button @click="dele" icon="el-icon-delete" :disabled="jxChangeOrder">删除</el-button></div>
      <div>
        <p>合计方式</p>
        <el-select class="top-inp" v-model="summarization">
          <el-option v-for="item in summarizationList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <el-checkbox v-model="additional" border :disabled="twoDimensional">追加订货</el-checkbox>
        <el-checkbox v-model="twoDimensional" border :disabled="additional">二维</el-checkbox></div>
    </div>
    <div class="cog-tab">
      <div>
        <el-table ref="table1" :header-cell-style="{background:'#f4f4f4',padding:0,height:'30px'}" 
          :cell-style="changeCellStyle" highlight-current-row :data="tableData1" style="width: 100%" height="67.5vh" @row-click="rowClick1">
          <el-table-column prop="orderSalesSequence" label="厂订序号" width="140"></el-table-column>
          <el-table-column prop="manufacturerNo" label="厂商编号" width="80"></el-table-column>
          <el-table-column prop="manufacturerName" label="厂商简称" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column prop="totalSum" label="数量" width="50"></el-table-column>
          <el-table-column prop="totalMoney" label="金额" width="80"></el-table-column>
          <el-table-column prop="orderTimeShort" label="订货日期" width="120"></el-table-column>
        </el-table>
        <el-pagination small background ref="paginationLeft" layout="prev, pager, next, jumper, sizes" :page-sizes="[20, 50, 100, 200]" :page-size="limitLeft" :page-count="pagesNumLeft" :total="dataLenLeft" @current-change="handleCurrentChangeLeft" @size-change="handleSizeChangeLeft"></el-pagination>
      </div>
      <div>
        <el-table ref="table2" border :header-cell-style="{background:'#f4f4f4',padding:0,height:'30px'}" :cell-style="{padding:0,height:'26px'}" highlight-current-row :data="tableData2" style="width: 100%" height="67.5vh" show-summary :summary-method="getSummaries" @row-click="rowClick2">
          <template v-for="i in knhList">
            <el-table-column :prop="i.prop" :label="i.label" :width="i.width" :key="i.prop" show-overflow-tooltip></el-table-column>
          </template>
        </el-table>
        <el-pagination small background ref="paginationRight" layout="prev, pager, next, jumper, sizes" :page-sizes="[20, 50, 100, 200]" :page-size="limit" :page-count="pagesNum" :total="dataLen" @current-change="handleCurrentChange" @size-change="handleSizeChange"></el-pagination>
      </div>
    </div>
    <!-- 改单密码验证 -->
    <verify-password 
      v-if="showpwd" 
      @closepwd="()=>{this.showpwd=false}" 
      @showRevision="pswCorrect"
      :operationType="operationType"
      :isConfirm="isConfirm"></verify-password>
    <revision v-show="showRevision" :flag="showRevision" :selectInputSequence="sequence" :manufacturerList="manufacturerList" :detailRow="detailRow" @closeRevision="()=>{this.showRevision=false}"></revision>
    <!-- 补单输入框 -->
    <sup-order v-show="showSupOrder" :sequence="sequence" @closeuopplement="()=>{this.showSupOrder=false}" @determine="determine"></sup-order>
    <foot-view class="footView">
      <div slot="text">
        <span>数据库：{{jxQuarter}}</span></div>
    </foot-view>
    <print-area v-show=false isInput='订' isVendor="厂商" :manufacturerNo="printVendor" :inputSequence="sequence" :jxQuarter="jxQuarter" :inputDate="inputDate" :manufacturerName="printVendorName" :principal="principal" :phone="phone" :address="address" :printTotal="printTotal" :printMoney="printMoney" :printStyle="printStyle" :printSellingPrice="printSellingPrice" :remark="remark"></print-area>
  </div>
</template>

<script>
const resources = require('../../../config/printCSS')

import footView from '../../../components/FootView'
import verifyPassword from '../../../components/VerifyPassword'
import supOrder from '../../../components/SupOrder'
import revision from './childComp/Revision'
import printArea from '../../../components/PrintVendorStock'

import { getManufacturer } from '../../../network/manufacturer'
import { orderQuery, confirmOrder } from '../../../network/manufacturerOrder'
import { getBranded } from '../../../network/branded'
import { getProductName } from '../../../network/productName'

import today from '../../../components/mixins/today'
import enterUp from '../../../components/mixins/enterUp'
import cookieFn from '../../../components/mixins/cookieFn'

export default {
  name:'vendor_order_goods_query',
  mixins: [today,enterUp,cookieFn],
  components:{
    footView,
    verifyPassword,
    supOrder,
    revision,
    printArea
  },
  data(){
    return{
      inpList: [],
      // 总数据条数
      dataLenLeft: 0,
      // 总页码
      pagesNumLeft: 0,
      // 分页条数
      limitLeft: 20,
      // 当前页码
      currentPageLeft: 1,

      // 总数据条数
      dataLen: 0,
      // 总页码
      pagesNum: 0,
      // 分页条数
      limit: 20,
      // 当前页码
      currentPage: 1,

      showSupOrder: false,
      showRevision: false,
      showpwd: false,
      showExport: false,
      isConfirm: false,

      operationType: 0,

      manufacturer: [],
      manufacturerList: [],
      inputDate1: '',
      inputSequence: '',
      receiptsNumber: '',
      styleNumber: '',
      brandedName: '',
      brandList: [],
      commodityName: '',
      commodityNameList: [],
      dateList: null,
      summarization: 0,
      summarizationList: [
        {value: 0, label: '不合计'},
        {value: 1, label: '款号'},
        {value: 2, label: '货号'},
      ],
      twoDimensional: false,
      additional: false,

      sequence: '',
      detailRow: {},

      tableData1: [],
      leftData: [],
      tableData2: [],
      // 右总表
      kindsNumberList: [],
      // 右二维表
      styleNumberList: [],
      // 追加订货表
      additionalList: [],
      // 选中的表
      selectList: [],
      
      knhList:[],
      knhList1:[
        {prop:'orderSalesSequence',label:'厂订序号',width:'140'},
        {prop:'receiptsNumber',label:'单号',width:'120'},
        {prop:'manufacturerNo',label:'厂商编号',width:''},
        {prop:'manufacturerName',label:'厂商简称',width:''},
        {prop:'kindsNumber',label:'货号',width:'140'},
        {prop:'commodityName',label:'品名',width:''},
        {prop:'sellingPrice',label:'售价',width:''},
        {prop:'discount',label:'折数',width:'50'},
        {prop:'onePrice',label:'单价',width:''},
        {prop:'number',label:'数量',width:''},
        {prop:'money',label:'金额',width:''},
        {prop:'orderTimeShort',label:'订货日期',width:'120'}
      ],
      knhList2:[{prop:'styleNumber',label:'款号',width:'160'},
        {prop:'colorNoName',label:'颜色',width:'100'},
        {prop:'c05',label:'05-XS',width:'55'},
        {prop:'c07',label:'07-S',width:'55'},
        {prop:'c09',label:'09-M',width:'55'},
        {prop:'c11',label:'11-L',width:'55'},
        {prop:'c13',label:'13-XL',width:'55'},
        {prop:'c15',label:'15-2L',width:'55'},
        {prop:'c17',label:'17-3L',width:'55'},
        {prop:'c19',label:'19-4L',width:'55'},
        {prop:'c21',label:'21-5L',width:'55'},
        {prop:'c23',label:'23-6L',width:'55'},
        {prop:'f',label:'F',width:'55'},
        {prop:'total',label:'小计',width:'60'},
        {prop:'sellingPrice',label:'售价',width:'70'},
        {prop:'onePrice',label:'单价',width:'70'},
        {prop:'money',label:'金额',width:'90'},
        {prop:'brandedName',label:'品牌',width:'100'},],
      knhList3: [
        {prop:'styleNumber',label:'款号',width:'140'},
        {prop:'commodityName',label:'品名',width:''},
        {prop:'sellingPrice',label:'售价',width:''},
        {prop:'discount',label:'折数',width:'50'},
        {prop:'onePrice',label:'单价',width:''},
        {prop:'number',label:'数量',width:''},
        {prop:'money',label:'金额',width:''},
        {prop:'orderTimeShort',label:'订货日期',width:'120'}
      ],
      knhList4: [
        {prop:'kindsNumber',label:'货号',width:'140'},
        {prop:'commodityName',label:'品名',width:''},
        {prop:'sellingPrice',label:'售价',width:''},
        {prop:'discount',label:'折数',width:'50'},
        {prop:'onePrice',label:'单价',width:''},
        {prop:'number',label:'数量',width:''},
        {prop:'money',label:'金额',width:''},
        {prop:'orderTimeShort',label:'订货日期',width:'120'}
      ],

      jxQuarter: this.getCookie('jxQuarter'),
      jxChangeOrder: this.getCookie('jxChangeOrder') == '0',

      // 打印
      styleList: [],
      printTotal: 0,
      printMoney: 0,
      // 款号合计
      printStyle: 0,
      printSellingPrice: 0,
      printVendor: '',
      printVendorName: '',
      principal: '',
      phone: '',
      inputDate: '',
      address: '',
      remark: ''
    }
  },
  methods:{
    pswCorrect(){
      switch (this.operationType) {
        case 1:
          this.showSupOrder = true
          break;
        case 2:
          this.showRevision = true
          break;
        case 3:
          this.$router.push({path: '/delete_document', query: {type: 8,sequence: this.sequence}})
          this.$store.commit('addNav',{label:'厂商订货删单',name:'delete_document'})
          break;
        default:
          break;
      }
      this.showpwd = false
    },

    // 改单
    showpwdbox(){
      if ( this.showSupOrder || this.showExport) return
      this.showpwd = true
      this.operationType = 2
    },
    // 补单
    showsupbox(){
      if (!this.sequence) {
        this.$alert('请先在左表选择一条数据再进行补单', '', {
          confirmButtonText: '确定'
        })
        return
      }
      if ( this.showSupOrder || this.showExport) return
      this.showpwd = true
      this.operationType = 1
    },
    determine(o){
      // 确认补单
      this.showSupOrder=false
      this.$router.push({path:'/order/vendor_order_goods_vo',query:{oid:o}})
      this.$store.commit('minusNav', '厂商订货')
      // this.$store.commit('addNav',{label:'厂商订货',name:'vendor_order_goods_vo'})
    },
    
    
    search(){
      this.sequence = ''
      this.twoDimensional = false
      this.additional = false
      this.leftData = []
      this.kindsNumberList = []
      this.styleNumberList= []
      this.additionalList = []
      this.selectList = []
      this.tableData1 = []
      this.tableData2 = []

      let d = {
        manufacturerNoList: this.manufacturer,
        prepayTime: this.inputDate1,
        orderSalesSequence: this.inputSequence,
        receiptsNumber: this.receiptsNumber,
        kindsNumberStr: this.styleNumber ? `%${this.styleNumber}%` : '',
        brandedName: this.brandedName,
        commodityName: this.commodityName,
        startTime: (this.dateList == '' || this.dateList == null) ? '' : this.dateList[0] + ' 00:00:00',
        endTime: (this.dateList == '' || this.dateList == null) ? '' : this.dateList[1] + ' 23:59:59',
        totalWay: this.summarization
      }
      
      orderQuery(JSON.stringify(d)).then(res => {
        if (res.data.code == 200) {
          this.currentPage = 1
          this.currentPageLeft = 1
          this.$refs.paginationRight.internalCurrentPage = 1
          this.$refs.paginationLeft.internalCurrentPage = 1
          
          for (const key in res.data.data) {
            if (res.data.data.hasOwnProperty(key)) {
              const element = res.data.data[key]
              element.orderTimeShort = element.orderTime.slice(0,10)
              this.leftData.push(element)
              element.manufacturerOrderInfoOneVOList.forEach(e => {
                e.orderTimeShort = e.orderTime.slice(0,10)
                e.colorNoName = e.colorNo + '.' + e.colorName
                this.kindsNumberList.push(e)
              })
            }
          }

          // this.kindsNumberList.sort((a,b) => {
          //   if (a.styleNumber == b.styleNumber) {
          //     if (a.colorNo == b.colorNo) {
          //       return a.relevanceSize.localeCompare(b.relevanceSize)
          //     } else {
          //       return a.colorNo.localeCompare(b.colorNo)
          //     }
          //   } else {
          //     return a.styleNumber.localeCompare(b.styleNumber)
          //   }
          // })

          this.kindsNumberList.forEach(e => {
            if (this.selectList.length) {
              let exist = 0
              for (const i of this.selectList) {
                if (i.kindsNumber == e.kindsNumber) {
                  i.number += Number(e.number)
                  i.money = (i.number * i.onePrice).toFixed(2)
                  exist = 1
                  break
                }
              }
              if (!exist) {
                this.selectList.push(e)
              }
            } else {
              this.selectList.push(e)
            }
          })

          this.dataLenLeft = this.leftData.length

          this.tableData1 = this.leftData.slice(0,this.limit)
          if (this.summarization == 2) {
            this.tableData2 = this.selectList.slice(0,this.limit)
            this.dataLen = this.selectList.length
          } else {
            this.tableData2 = this.kindsNumberList.slice(0,this.limit)
            this.dataLen = this.kindsNumberList.length
          }

          if (!this.tableData1.length) {
            this.$message.info('暂无数据')
          }

          this.$nextTick(() => {
            this.$refs.table2.doLayout()
          })
          
          this.conversionList(this.kindsNumberList)
          this.kindsNumberList.forEach(e => {
            if (e.isAppend) {
              this.additionalList.push(e)
            }
          })
        }
      })
    },

    Confirm(){
      if (!this.sequence) return
      confirmOrder({sequence: this.sequence}).then(res => {
        if (res.data.code == 200) {
          this.$message({
            message: '确认成功',
            type: 'success'
          })
          this.isConfirm = true
        } else {
          this.$message.error('确认失败')
        }
      })
    },

    rowClick1(row){
      // console.log(row)
      this.currentPage = 1

      this.$refs.table2.setCurrentRow({})
      this.detailRow = {}
      this.sequence = row.orderSalesSequence
      this.printVendor = row.manufacturerNo
      this.printVendorName = row.manufacturerName
      this.inputDate = row.orderTimeShort
      this.remark = row.remark
      

      this.selectList = []
      this.kindsNumberList.forEach(e => {
        if (this.sequence == e.orderSalesSequence) {
          this.selectList.push(e)
        }
      })

      this.conversionList(this.selectList)
      if (this.twoDimensional) {
        this.dataLen = this.styleNumberList.length
        this.tableData2 = this.styleNumberList.slice(0,this.limit)
      } else {
        this.dataLen = this.selectList.length
        this.tableData2 = this.selectList.slice(0,this.limit)
      }
    },
    rowClick2(row){
      this.$refs.table1.setCurrentRow({})
      this.detailRow = row
      this.sequence = ''
    },

    conversionList(list){
      this.styleNumberList = []
      let sn = 0
      let cn = 0

      // 款号颜色
      for (const i of list) {
        if (!this.styleNumberList.length) {
          // 空数组直接添加
          this.styleNumberList.push({
            styleNumber: i.styleNumber,
            colorNo: i.colorNo,
            colorName: i.colorName,
            colorNoName: i.colorNoName,
            c05: 0,
            c07: 0,
            c09: 0,
            c11: 0,
            c13: 0,
            c15: 0,
            c17: 0,
            c19: 0,
            c21: 0,
            c23: 0,
            f: 0,
            total: 0,
            sellingPrice: i.sellingPrice,
            onePrice: i.onePrice,
            commodityName: i.commodityName,
            brandedName: i.brandedName,
            quarter: i.quarter,
            tagPrice: i.sellingPrice
          })
          continue
        }
        for (const j of this.styleNumberList) {
          if (j.styleNumber == i.styleNumber) {
            sn = 1
            // 货号存在，判断颜色有没有
            for (const k of this.styleNumberList) {
              if (i.styleNumber == k.styleNumber && i.colorName == k.colorName) {
                cn = 1
                break
              }
              cn = 0
            }
            if(cn) break
          }
          sn = 0
        }
        
        if (!sn || !cn) {
          // 货号或当前货号的颜色不存在，直接添加
          this.styleNumberList.push({
            styleNumber: i.styleNumber,
            colorNo: i.colorNo,
            colorName: i.colorName,
            colorNoName: i.colorNoName,
            c05: 0,
            c07: 0,
            c09: 0,
            c11: 0,
            c13: 0,
            c15: 0,
            c17: 0,
            c19: 0,
            c21: 0,
            c23: 0,
            f: 0,
            total: 0,
            sellingPrice: i.sellingPrice,
            onePrice: i.onePrice,
            commodityName: i.commodityName,
            brandedName: i.brandedName,
            quarter: i.quarter,
            tagPrice: i.sellingPrice
          })
        }
      }

      // 数量赋值
      list.forEach(e => {
        for (const i of this.styleNumberList) {
          if (e.styleNumber == i.styleNumber && e.colorName == i.colorName ) {
            i[e.relevanceSize] = i[e.relevanceSize]+e.number
            break
          }
        }
      })

      // 计算总数
      this.styleNumberList.forEach(e => {
        e.total = e.c05 + e.c07 + e.c09 + e.c11 + e.c13 + e.c15 + e.c17 + e.c19 + e.c21 + e.c23 + e.f
        e.sellingPriceMoney = (e.sellingPrice*e.total).toFixed(2)
        e.money = (e.onePrice*e.total).toFixed(2)
        if (e.c05 === 0) e.c05 = ''
        if (e.c07 === 0) e.c07 = ''
        if (e.c09 === 0) e.c09 = ''
        if (e.c11 === 0) e.c11 = ''
        if (e.c13 === 0) e.c13 = ''
        if (e.c15 === 0) e.c15 = ''
        if (e.c17 === 0) e.c17 = ''
        if (e.c19 === 0) e.c19 = ''
        if (e.c21 === 0) e.c21 = ''
        if (e.c23 === 0) e.c23 = ''
        if (e.f === 0) e.f = ''
      })
    },

    // 每页显示页数改变
    handleSizeChange(val){
      this.limit = val
      this.currentPage = 1
      if (this.additional) {
        this.dataLen = this.additionalList.length
        this.tableData2 = this.additionalList.slice(0,this.currentPage*this.limit)
        return
      }
      switch (this.twoDimensional) {
        case true:
          this.dataLen = this.styleNumberList.length
          this.tableData2 = this.styleNumberList.slice(0,this.currentPage*this.limit)
          break;
        case false:
          if (this.sequence || this.summarization == 2) {
            this.dataLen = this.selectList.length
            this.tableData2 = this.selectList.slice(0,this.currentPage*this.limit)
          } else {
            this.dataLen = this.kindsNumberList.length
            this.tableData2 = this.kindsNumberList.slice(0,this.currentPage*this.limit)
          }
          break;
      }
    },
    // 当前页改变
    handleCurrentChange(val){
      this.currentPage = val
      if (this.additional) {
        this.dataLen = this.additionalList.length
        this.tableData2 = this.additionalList.slice((this.currentPage-1)*this.limit,this.currentPage*this.limit)
        return
      }
      switch (this.twoDimensional) {
        case true:
          this.tableData2 = this.styleNumberList.slice((this.currentPage-1)*this.limit,this.currentPage*this.limit)
          break;
        case false:
          if (this.sequence || this.summarization == 2) {
            this.tableData2 = this.selectList.slice((this.currentPage-1)*this.limit,this.currentPage*this.limit)
          } else {
            this.tableData2 = this.kindsNumberList.slice((this.currentPage-1)*this.limit,this.currentPage*this.limit)
          }
          break;
      }
    },

    handleSizeChangeLeft(val){
      this.limitLeft = val
      this.tableData1 = this.leftData.slice((this.currentPageLeft-1)*this.limitLeft,this.currentPageLeft*this.limitLeft)
    },
    handleCurrentChangeLeft(val){
      this.currentPageLeft = val
      this.tableData1 = this.leftData.slice((this.currentPageLeft-1)*this.limitLeft,this.currentPageLeft*this.limitLeft)
    },

    dele(){
      if (!this.sequence) return
      this.showpwd = true
      this.operationType = 3
    },

    printReport(){
      this.clearPrintTable()
      this.styleList = []
      this.printTotal = 0
      this.printMoney = 0
      this.printStyle = 0
      this.printSellingPrice = 0
      this.$confirm('是否使用A4纸打印', '提示', {
        distinguishCancelAndClose: true,
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning'
      }).then(() => {
        // 用A4纸
        // console.log('用A4纸')
        this.openPrint(true)
      }).catch(action => {
        // 用半张A4纸  
        if (action == 'cancel') {
          // console.log('用半张A4纸')
          this.openPrint(false)
        }
      })
    },
    openPrint(isA4, x=1, id='printTable'){
      let index = --x
      let printTable = document.getElementById(id)
      let length = this.styleNumberList.length

      // if (!this.checked) {
      //   this.conversionList(this.kindsNumberData)
      // }
      
      for (index; index < length; index++) {
        const e = this.styleNumberList[index]
        // console.log(index)
        // console.log(index+1)
        this.printTotal += Number(e.total)
        this.printMoney += Number(e.money)
        this.printSellingPrice += Number(e.sellingPriceMoney)

        let row = printTable.insertRow(printTable.FetchRowCount)
        row.insertCell(0).innerHTML = index+1
        row.insertCell(1).innerHTML = e.styleNumber + '-' + e.colorNo
        row.insertCell(2).innerHTML = e.colorName
        row.insertCell(3).innerHTML = e.commodityName
        row.insertCell(4).innerHTML = e.c05
        row.insertCell(5).innerHTML = e.c07
        row.insertCell(6).innerHTML = e.c09
        row.insertCell(7).innerHTML = e.c11
        row.insertCell(8).innerHTML = e.c13
        row.insertCell(9).innerHTML = e.c15
        row.insertCell(10).innerHTML = e.c17
        row.insertCell(11).innerHTML = e.c19
        row.insertCell(12).innerHTML = e.c21
        row.insertCell(13).innerHTML = e.c23
        row.insertCell(14).innerHTML = e.f
        row.insertCell(15).innerHTML = e.total
        row.insertCell(16).innerHTML = e.sellingPrice
        row.insertCell(17).innerHTML = e.sellingPriceMoney

        if (isA4) {
          // console.log(parseInt((index+1)/33))
          // console.log((index+1)%33 == 0)
          if (parseInt((index+1)/33) && (index+1)%33 == 0 && (index+1) != length) {
            // console.log('33倍数')
            let pageIndex = index + 3 - (parseInt(index/33)*33)
            // console.log(pageIndex)
            // console.log(index+1)    // 33
            // console.log(length)     // 36
            let startingPoint = index - 32
            let pageTotal = 0
            let pageMoney = 0
            for (let j = startingPoint; j <= index; j++) {
              pageTotal += Number(this.styleNumberList[j].total)
              pageMoney += Number(this.styleNumberList[j].sellingPriceMoney)
            }

            let rowEnd = printTable.insertRow(printTable.FetchRowCount)
            rowEnd.insertCell(0).innerHTML = '本页小计：'
            printTable.rows[pageIndex].cells[0].colSpan = '2'
            rowEnd.insertCell(1).innerHTML = pageTotal
            printTable.rows[pageIndex].cells[1].colSpan = '2'
            rowEnd.insertCell(2).innerHTML = '汇总金额：'
            printTable.rows[pageIndex].cells[2].colSpan = '4'
            rowEnd.insertCell(3).innerHTML = pageMoney.toFixed(2)
            printTable.rows[pageIndex].cells[3].colSpan = '10'

            let newHead = document.createElement('div')
            newHead.classList.add("addPrintHead")
            newHead.innerHTML = `
              <p class="rightTag" style="top: ${(index+1)/33 * 29.7 + 3}cm;">白联仓库 红联财务 黄联客户</p>
              <span class="printHead">
                ${this.manufacturerName}${this.jxQuarter}厂商订货单
              </span>
              <div class="info" style="height: 25px;">
                <p style="margin: 5px 0;">厂商：${this.printVendorName}</p>
                <p style="margin: 5px 0;">联系人：${this.principal}</p>
                <p style="margin: 5px 0;">订货序号：${this.inputSequence}</p>
              </div>
              <div class="info" style="height: 25px;">
                <p style="margin: 5px 0;">厂商电话：${this.phone}</p>
                <p style="margin: 5px 0;">订货日期：${this.inputDate}</p>
              </div>
              <div class="info" style="height: 25px;">
                <p style="margin: 5px 0;">公司地址：${this.address}</p>
              </div>
            `
            newHead.style.pageBreakBefore = 'always'
            this.insertAfter(newHead, printTable)

            let tableId = `printTable${(index+1)/33}`
            // console.log(tableId)
            let tableDom = document.createElement("table")
            tableDom.border = '1'
            tableDom.align = 'center'
            tableDom.id = tableId
            tableDom.innerHTML = `
              <thead>
                <tr>
                  <td style="width: 4%;padding: 0;text-align: center;" rowspan="2">序号</td>
                  <td style="width: 15%;padding: 0;text-align: center;" rowspan="2">型色</td>
                  <td style="width: 8%;padding: 0;text-align: center;" rowspan="2">颜色</td>
                  <td style="width: 15%;padding: 0;text-align: center;" rowspan="2">品名</td>
                  <td style="width: 3.8%;padding: 0;text-align: center;" nowrap="nowrap">05</td>
                  <td style="width: 3.8%;padding: 0;text-align: center;" nowrap="nowrap">07</td>
                  <td style="width: 3.8%;padding: 0;text-align: center;" nowrap="nowrap">09</td>
                  <td style="width: 3.8%;padding: 0;text-align: center;" nowrap="nowrap">11</td>
                  <td style="width: 3.8%;padding: 0;text-align: center;" nowrap="nowrap">13</td>
                  <td style="width: 3.8%;padding: 0;text-align: center;" nowrap="nowrap">15</td>
                  <td style="width: 3.8%;padding: 0;text-align: center;" nowrap="nowrap">17</td>
                  <td style="width: 3.8%;padding: 0;text-align: center;" nowrap="nowrap">19</td>
                  <td style="width: 3.8%;padding: 0;text-align: center;" nowrap="nowrap">21</td>
                  <td style="width: 3.8%;padding: 0;text-align: center;" nowrap="nowrap">23</td>
                  <td style="width: 3.8%;padding: 0;text-align: center;">F</td>
                  <td rowspan="2" style="text-align: center;width: 5%;">数量</td>
                  <td rowspan="2" style="text-align: center;width: 5%;">售价</td>
                  <td rowspan="2" style="text-align: center;">金额</td>
                </tr>
                <tr>
                  <td style="text-align: center;border-top: 1px dotted;border-left: 1px dotted;">XS</td>
                  <td style="text-align: center;border-top: 1px dotted;">S</td>
                  <td style="text-align: center;border-top: 1px dotted;">M</td>
                  <td style="text-align: center;border-top: 1px dotted;">L</td>
                  <td style="text-align: center;border-top: 1px dotted;">XL</td>
                  <td style="text-align: center;border-top: 1px dotted;">2L</td>
                  <td style="text-align: center;border-top: 1px dotted;">3L</td>
                  <td style="text-align: center;border-top: 1px dotted;">4L</td>
                  <td style="text-align: center;border-top: 1px dotted;">5L</td>
                  <td style="text-align: center;border-top: 1px dotted;">6L</td>
                  <td style="text-align: center;border-top: 1px dotted;"></td>
                </tr>
              </thead>
            `
            // console.log(tableDom)
            // console.log(index)
            this.printStyleCount(e.styleNumber)
            this.insertAfter(tableDom, newHead)
            this.openPrint(true,index+2,tableId)
            return
          }
          if ((index+1) == length) {
            let pageIndex = index + 3 - (parseInt(index/33)*33)
            // console.log('最后一行')
            let startingPoint = index < 33 ? 0 : parseInt(index/33)*33
            let pageTotal = 0
            let pageMoney = 0
            for (let j = startingPoint; j <= index; j++) {
              pageTotal += Number(this.styleNumberList[j].total)
              pageMoney += Number(this.styleNumberList[j].sellingPriceMoney)
            }
            let rowEnd = printTable.insertRow(printTable.FetchRowCount)
            rowEnd.insertCell(0).innerHTML = '本页小计：'
            printTable.rows[pageIndex].cells[0].colSpan = '2'
            rowEnd.insertCell(1).innerHTML = pageTotal
            printTable.rows[pageIndex].cells[1].colSpan = '2'
            rowEnd.insertCell(2).innerHTML = '汇总金额：'
            printTable.rows[pageIndex].cells[2].colSpan = '4'
            rowEnd.insertCell(3).innerHTML = pageMoney.toFixed(2)
            printTable.rows[pageIndex].cells[3].colSpan = '10'
          }
        } else {
          if (parseInt((index+1)/12) && (index+1)%12 == 0 && (index+1) != length) {
            // console.log('12倍数')
            let pageIndex = index + 3 - (parseInt(index/12)*12)
            // console.log(pageIndex)
            // console.log(index+1)    // 12
            // console.log(length)     // 36
            let startingPoint = index - 11
            let pageTotal = 0
            let pageMoney = 0
            for (let j = startingPoint; j <= index; j++) {
              pageTotal += Number(this.styleNumberList[j].total)
              pageMoney += Number(this.styleNumberList[j].sellingPriceMoney)
            }

            let rowEnd = printTable.insertRow(printTable.FetchRowCount)
            rowEnd.insertCell(0).innerHTML = '本页小计：'
            printTable.rows[pageIndex].cells[0].colSpan = '2'
            rowEnd.insertCell(1).innerHTML = pageTotal
            printTable.rows[pageIndex].cells[1].colSpan = '2'
            rowEnd.insertCell(2).innerHTML = '汇总金额：'
            printTable.rows[pageIndex].cells[2].colSpan = '4'
            rowEnd.insertCell(3).innerHTML = pageMoney.toFixed(2)
            printTable.rows[pageIndex].cells[3].colSpan = '10'

            let newHead = document.createElement('div')
            newHead.classList.add("addPrintHead")
            newHead.innerHTML = `
              <p class="rightTag" style="top: ${(index+1)/12 * 14.85 + 3}cm;">白联仓库 红联财务 黄联客户</p>
              <span class="printHead">
                ${this.manufacturerName}${this.jxQuarter}厂商订货单
              </span>
              <div class="info" style="height: 25px;">
                <p style="margin: 5px 0;">厂商：${this.printVendorName}</p>
                <p style="margin: 5px 0;">联系人：${this.principal}</p>
                <p style="margin: 5px 0;">订货序号：${this.inputSequence}</p>
              </div>
              <div class="info" style="height: 25px;">
                <p style="margin: 5px 0;">厂商电话：${this.phone}</p>
                <p style="margin: 5px 0;">订货日期：${this.inputDate}</p>
              </div>
              <div class="info" style="height: 25px;">
                <p style="margin: 5px 0;">公司地址：${this.address}</p>
              </div>
            `
            newHead.style.pageBreakBefore = 'always'
            this.insertAfter(newHead, printTable)

            let tableId = `printTable${(index+1)/12}`
            // console.log(tableId)
            let tableDom = document.createElement("table")
            tableDom.border = '1'
            tableDom.align = 'center'
            tableDom.id = tableId
            tableDom.innerHTML = `
              <thead>
                <tr>
                  <td style="width: 4%;padding: 0;text-align: center;" rowspan="2">序号</td>
                  <td style="width: 15%;padding: 0;text-align: center;" rowspan="2">型色</td>
                  <td style="width: 8%;padding: 0;text-align: center;" rowspan="2">颜色</td>
                  <td style="width: 15%;padding: 0;text-align: center;" rowspan="2">品名</td>
                  <td style="width: 3.8%;padding: 0;text-align: center;" nowrap="nowrap">05</td>
                  <td style="width: 3.8%;padding: 0;text-align: center;" nowrap="nowrap">07</td>
                  <td style="width: 3.8%;padding: 0;text-align: center;" nowrap="nowrap">09</td>
                  <td style="width: 3.8%;padding: 0;text-align: center;" nowrap="nowrap">11</td>
                  <td style="width: 3.8%;padding: 0;text-align: center;" nowrap="nowrap">13</td>
                  <td style="width: 3.8%;padding: 0;text-align: center;" nowrap="nowrap">15</td>
                  <td style="width: 3.8%;padding: 0;text-align: center;" nowrap="nowrap">17</td>
                  <td style="width: 3.8%;padding: 0;text-align: center;" nowrap="nowrap">19</td>
                  <td style="width: 3.8%;padding: 0;text-align: center;" nowrap="nowrap">21</td>
                  <td style="width: 3.8%;padding: 0;text-align: center;" nowrap="nowrap">23</td>
                  <td style="width: 3.8%;padding: 0;text-align: center;">F</td>
                  <td rowspan="2" style="text-align: center;width: 5%;">数量</td>
                  <td rowspan="2" style="text-align: center;width: 5%;">售价</td>
                  <td rowspan="2" style="text-align: center;">金额</td>
                </tr>
                <tr>
                  <td style="text-align: center;border-top: 1px dotted;border-left: 1px dotted;">XS</td>
                  <td style="text-align: center;border-top: 1px dotted;">S</td>
                  <td style="text-align: center;border-top: 1px dotted;">M</td>
                  <td style="text-align: center;border-top: 1px dotted;">L</td>
                  <td style="text-align: center;border-top: 1px dotted;">XL</td>
                  <td style="text-align: center;border-top: 1px dotted;">2L</td>
                  <td style="text-align: center;border-top: 1px dotted;">3L</td>
                  <td style="text-align: center;border-top: 1px dotted;">4L</td>
                  <td style="text-align: center;border-top: 1px dotted;">5L</td>
                  <td style="text-align: center;border-top: 1px dotted;">6L</td>
                  <td style="text-align: center;border-top: 1px dotted;"></td>
                </tr>
              </thead>
            `
            // console.log(tableDom)
            // console.log(index)
            this.printStyleCount(e.styleNumber)
            this.insertAfter(tableDom, newHead)
            this.openPrint(false,index+2,tableId)
            return
          }
          if ((index+1) == length) {
            let pageIndex = index + 3 - (parseInt(index/12)*12)
            // console.log('最后一行')
            let startingPoint = index < 12 ? 0 : parseInt(index/12)*12
            let pageTotal = 0
            let pageMoney = 0
            for (let j = startingPoint; j <= index; j++) {
              pageTotal += Number(this.styleNumberList[j].total)
              pageMoney += Number(this.styleNumberList[j].sellingPriceMoney)
            }
            let rowEnd = printTable.insertRow(printTable.FetchRowCount)
            rowEnd.insertCell(0).innerHTML = '本页小计：'
            printTable.rows[pageIndex].cells[0].colSpan = '2'
            rowEnd.insertCell(1).innerHTML = pageTotal
            printTable.rows[pageIndex].cells[1].colSpan = '2'
            rowEnd.insertCell(2).innerHTML = '汇总金额：'
            printTable.rows[pageIndex].cells[2].colSpan = '4'
            rowEnd.insertCell(3).innerHTML = pageMoney.toFixed(2)
            printTable.rows[pageIndex].cells[3].colSpan = '10'
          }
        }

        this.printStyleCount(e.styleNumber)
      }

      this.printStyle = this.styleList.length
      // console.log(this.styleList)
      let int = setInterval(() => {
        if (this.printStyle) {
          clearInterval(int)
          let printHtml = document.getElementById('p').innerHTML
          let wind = window.open("",'newwindow', 'height=500, width=1000, top=100, left=100, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no')
          wind.document.body.innerHTML = printHtml
          let style = document.createElement('style')
          style.type = 'text/css'
          style.innerHTML = resources.printCSS
          wind.document.head.appendChild(style)
          wind.print()
          return false
        }
      }, 500)
    },
    clearPrintTable(){
      let printTable = document.getElementById("printTable")
      let trs = printTable.getElementsByTagName("tr")
      let len = trs.length - 1
      for(let i = len; i > 1; i--) {
        printTable.deleteRow(i)
      }

      let printArea = document.getElementById("p")
      let tables = printArea.getElementsByTagName('table')
      len = tables.length
      for (let i = 1; i < len; i++) {
        tables[1].remove()
      }
      let addPrintHeads = document.getElementsByClassName('addPrintHead')
      len = addPrintHeads.length
      for (let i = 0; i < len; i++) {
        addPrintHeads[0].remove()
      }
    },
    printStyleCount(s){
      if (!this.styleList.length) {
        this.styleList.push(s)
      } else {
        let exist = 0
        for (const i of this.styleList) {
          // console.log(i)
          if (i == s) {
            exist = 1
            break
          }
        }
        if (!exist) {
          this.styleList.push(s)
        }
      }
    },
    // insertAfter(p,header1) // 因为js没有直接追加到指定元素后面的方法 所以要自己创建一个方法
    insertAfter( newElement, targetElement ){ // newElement是要追加的元素 targetElement 是指定元素的位置
      let parent = targetElement.parentNode // 找到指定元素的父节点
      if( parent.lastChild == targetElement ){ // 判断指定元素的是否是节点中的最后一个位置 如果是的话就直接使用appendChild方法
        parent.appendChild( newElement, targetElement )
      }else{
        parent.insertBefore( newElement, targetElement.nextSibling )
      }
    },

    getSummaries(param){
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        const prop = column.property
        const values = data.map(item => Number(item[prop]))
        if (!values.every(value => isNaN(value))) {
          if (prop == 'c05' || prop == 'c07' || prop == 'c09' || prop == 'c11' || prop == 'c13' || prop == 'c15' || prop == 'c17' || prop == 'c19' || prop == 'c21' || prop == 'c23' || prop == 'f' || prop == 'total' || prop == 'number') {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            if (!sums[index]) {
              sums[index] = ''
            }
            let decimal = sums[index].toString().split('.')[1]
            if (decimal && decimal.length > 2) {
              sums[index] = sums[index].toFixed(2)
            }
          }
        }
      })
      return sums
    },

    changeCellStyle({row, column, rowIndex, columnIndex}){
      let style = "height:26px;padding:0;"
      if (!row.affirm) {
        return style + `background-color:${this.$store.state.unconfirmedBG};`
      } else {
        return style
      }
    }
  },
  watch:{
    twoDimensional(a,b){
      this.currentPage = 1
      this.$refs.paginationRight.internalCurrentPage = 1
      
      this.selectList = []
      if (this.sequence) {
        this.kindsNumberList.forEach(e => {
          if (this.sequence == e.orderSalesSequence) {
            this.selectList.push(e)
          }
        })
        this.conversionList(this.selectList)
      } else {
        this.conversionList(this.kindsNumberList)
      }

      if (a) {
        // 显示二维表
        this.dataLen = this.styleNumberList.length
        this.knhList = this.knhList2
        this.tableData2 = this.styleNumberList.slice(0,this.limit)
      } else {
        this.knhList = this.knhList1
        if (this.inputSequence) {
          this.dataLen = this.selectList.length
          this.tableData2 = this.selectList.slice(0,this.limit)
        } else {
          this.dataLen = this.kindsNumberList.length
          this.tableData2 = this.kindsNumberList.slice(0,this.limit)
        }
      }
    },
    summarization(a,b){
      switch (a) {
        case 0:
          this.knhList = this.knhList1
          break;
        case 1:
          this.knhList = this.knhList3
          break;
        case 2:
          this.knhList = this.knhList4
          break;
        default:
          break;
      }
      this.search()
    },
    additional(a,b){
      this.currentPage = 1
      this.$refs.paginationRight.internalCurrentPage = 1

      if (a) {
        this.tableData2 = this.additionalList.slice(0,this.limit)
      } else {
        this.tableData2 = this.kindsNumberList.slice(0,this.limit)
      }
    },
    dataLen(a,b){
      this.pagesNum = Math.ceil(this.dataLen / this.limit)
    },
    limit(a,b){
      this.pagesNum = Math.ceil(this.dataLen / this.limit)
    },
    dataLenLeft(a,b){
      this.pagesNumLeft = Math.ceil(this.dataLenLeft / this.limitLeft)
    },
    limitLeft(a,b){
      this.pagesNumLeft = Math.ceil(this.dataLenLeft / this.limitLeft)
    },
    $route(a,b){
      if (b.path.indexOf('delete_document') != -1) this.search()
    },
    printVendor(a,b){
      if (!a) return
      getManufacturer({no:a,limit:99999}).then(res => {
        this.principal = res.data.data[0].principal
        this.phone = res.data.data[0].phone
        this.address = res.data.data[0].address
      })
    },
    inputSequence(a,b){
      this.inputSequence = a.toUpperCase().trim()
    },
    receiptsNumber(a,b){
      this.receiptsNumber = a.toUpperCase().trim()
    },
    styleNumber(a,b){
      this.styleNumber = a.toUpperCase().trim()
    }
  },
  created(){
    this.inpList = this.getInput()
    this.knhList = this.knhList1

    // 默认选之前一周
    // this.dateList = [this.searchDate(7),this.searchDate()]

    // 获取厂商信息
    getManufacturer({limit:9999}).then(res=>{
      if (res.data.code == 200) {
        let list = res.data.data
        list.forEach(e => {
          this.manufacturerList.push({value:e.no,label:e.name})
        })
      }
    })
    // 获取品牌
    getBranded().then(res => {
      res.data.data.forEach(e => {
        this.brandList.push({value:e.name,label:e.name})
      })
    })
    // 获取品名信息
    getProductName().then(res => {
      if (res.data.code == 200) {
        let list = res.data.data
        list.forEach(e => {
          this.commodityNameList.push({value:e.name,label:e.name})
        })
      }
    })
  }
}
</script>